﻿<template>
  <div>
    <!-- 标题部分 -->
    <V-Title :titleName = "titleName"></V-Title>
    <div v-loading = "loading" class = "page_secondMainContent clear">
      <!-- 左侧表的树状列表 -->
      <div class = "page_leftContent">
        <div class = "page_leftSearchContent clear">
          <el-button @click = "addTable" type = "primary" size = "mini" :disabled = "isEdit || createdEdit">
            <i class = "iconfont icon-add"></i>元数据表
          </el-button>
          <div class = "page_leftSearchInput">
            <el-input placeholder = "输入表名称" v-model = "filterText" prefix-icon = "el-icon-search" clearable></el-input>
          </div>
        </div>
        <div class = "main_tree">
          <el-tree :data = "getData" node-key = "treeId" :check-on-click-node = "true" :check-strictly = "true"
          accordion @node-click = "handleNodeClick" :filter-node-method = "filterNode"
          :indent = "15" :props = "defaultProps" ref = "myTree" show-checkbox
          @check-change = "handleCheckChange" :default-expanded-keys = "defaultExpanded" :default-checked-keys = "defaultChecked">
            <span slot-scope = "{node, data}" class = "page_secondLevel">
              <span v-if = "data.hadOperation" class = "page_treeBtns">
                <el-button v-show = "data.is_locked" type = "text" size="mini" title = "解锁" @click = "handleUnlockTable(data)" >
                  <i class = "iconfont icon-mimajiesuo01"></i>
                </el-button>
                <el-button v-show = "!data.is_locked" type = "text" size = "mini" title = "锁定" @click = "handleLockTable(data)">
                  <i class = "iconfont icon-lock"></i>
                </el-button>
                <el-button :disabled = "data.is_locked" type = "text" size = "mini" title = "编辑" @click = "handleEditTable(data)">
                  <i class = "iconfont icon-bianji"></i>
                </el-button>
                <el-button :disabled = "data.is_locked" type = "text" size = "mini" title = "删除" @click = "handleDeleteTable(data)">
                  <i class = "iconfont icon-shanchu"></i>
                </el-button>
              </span>
              <span v-if = "!data.hadOperation" :title = "node.label">{{node.label}}</span>
              <span v-if = "data.hadOperation" class = "page_treeLabel" :title = "data.metadesc + '(' + data.metaname + ')'">{{data.metadesc}}({{data.metaname}})</span>
            </span>
          </el-tree>
        </div>
        <div class = 'page_leftBottomBtns'>
          <el-button  type = "info" @click = 'importMetaTable_ws'>导 入</el-button>
          <el-button type = "primary" @click = 'downloadMetaTable_ws'>导 出</el-button>
        </div>
      </div>
      <!-- 右侧内容区域 -->
      <div class="page_rightContent">
        <el-form :label-width = "labelTableWidth" :model = "ruleForm" :rules = "rules" ref = "ruleForm">
          <el-row>
            <el-col :span = "11" style = 'height:52px'>
              <el-form-item label = "元数据表名称：" prop = "metaname">
                <el-input :disabled = "!isEdit" v-model = "ruleForm.metaname" placeholder = "请输入元数据表名称" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span = "11" :offset = "2" style = 'height:52px'>
              <el-form-item label = "元数据表类型：" prop = "category_no">
                <el-select :disabled = "!isEdit && !createdEdit" v-model = "ruleForm.category_no" placeholder = "请选择元数据表类型" filterable clearable>
                  <el-option v-for = "item in categorys" :key = "item.category_no" :label = "item.category_name" :value = "item.category_no"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span = "11" style = 'height:52px'>
              <el-form-item label = "关联的主表：">
                <el-select :disabled = "!isEdit && !createdEdit" v-model = "ruleForm.main_ref" placeholder = "请选择关联的元数据主表" filterable clearable @change = 'mainRefTableChange'>
                  <el-option-group v-for = 'group in allMetaTable' :key = 'group.category_no' :label = 'group.category_name'>
                    <el-option v-for = 'item in group.tables' :key = 'item.metauid' :value = 'item.metauid' :label = "item.metadesc ? item.metadesc + '(' + item.metaname + ')' : item.metaname"></el-option>
                  </el-option-group>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span = "11" :offset = "2" style = 'height:52px'>
              <el-form-item label = "关联主表显示栏位：">
                <el-select :disabled = "(!isEdit && !createdEdit || !ruleForm.main_ref)" v-model = "ruleForm.main_show_col" placeholder = "请选择关联的元数据主表显示栏位" filterable clearable>
                  <el-option v-for = '(item, index) in showColumns' :key = 'index' :label = 'item.column_desc' :value = 'item.column_name'></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span = "24">
              <el-form-item label = "元数据表描述：">
                <el-input :disabled = "!isEdit && !createdEdit" type = "textarea" v-model = "ruleForm.metadesc" placeholder = "请输入元数据表描述" autosize clearable></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <!-- 表格的区域 -->
          <el-tabs type = "border-card" v-model="activeName">
            <el-tab-pane label = '新增栏位' name = 'addColumns'>
              <div class = 'page_tableContent'>
                <div class = "addColumn" v-show = "isEdit">
                  <p @click = "addColumn"> <i class="iconfont icon-add"></i>新增字段</p>
                </div>
                <el-table :data = "ruleForm.tableData" style = "width:100%" empty-text = "暂无字段，请立即添加" border stripe>
                  <el-table-column align = "center" label = "字段名称" :render-header = "handelHelp" label-class-name = "字段名称不能为空，且必须是英文字符" show-overflow-tooltip>
                    <template slot-scope = "scope">
                      <el-form-item :prop = "'tableData[' + scope.$index + '].column_name'" :rules = "rules.column_name">
                        <el-input :disabled = "!isEdit" v-model = "scope.row.column_name" placeholder = "请输入" :title = "scope.row.column_name" clearable></el-input>
                      </el-form-item>
                    </template>
                  </el-table-column>
                  <el-table-column align = "center" label = "字段描述" :render-header = "handelHelp" label-class-name = "字段的描述内容不能超过100字符">
                    <template slot-scope = "scope">
                      <el-form-item :prop = "'tableData[' + scope.$index + '].column_desc'" :rules = "rules.column_desc">
                        <el-input :disabled = "!isEdit && !createdEdit" v-model = "scope.row.column_desc" placeholder = "请输入" :title = "scope.row.column_desc" clearable></el-input>
                      </el-form-item>
                    </template>
                  </el-table-column>
                  <el-table-column align = "center" label = "字段类型" :render-header = "handelHelp" label-class-name = "字段类型不能为空">
                    <template slot-scope = "scope">
                      <el-form-item :prop = "'tableData[' + scope.$index + '].data_type'" :rules = "rules.data_type">
                        <el-select :disabled = "!isEdit" v-model = "scope.row.data_type" placeholder = "请选择" @change = "dataTypeChange(scope.row, 'ruleForm')"
                        filterable clearable :title = 'scope.row.data_type' style = 'width:100%'>
                          <el-option-group v-for = 'group in allDataType_category' :key = 'group.category' :label = 'group.category'>
                            <el-option v-for = 'item in group.tables' :key = "item.data_type + '(' +scope.$index + ')'" :value = 'item.data_type' :label = "item.desc ? item.data_type + '(' + item.desc + ')' : item.data_type"></el-option>
                          </el-option-group>
                        </el-select>
                      </el-form-item>
                    </template>
                  </el-table-column>
                  <el-table-column align = "center" label = "数据精度" :render-header = "handelHelp"
                  label-class-name = "仅当字段为varchar、nvarchar、numberic类型时可输入，并且不能为空，只能为正整数">
                    <template slot-scope = "scope">
                      <el-form-item :prop = "'tableData[' + scope.$index + '].precision'" :rules = "rules.precision"
                      :required = "scope.row.typeArray ? !scope.row.typeArray.is_allow_empty_zero_precision : ''">
                        <el-input :disabled = "scope.row.typeArray ? (!isEdit || scope.row.typeArray.is_allow_empty_zero_precision) : !isEdit"
                        v-model = "scope.row.precision" placeholder = "请输入" :title = 'scope.row.precision' clearable></el-input>
                      </el-form-item>
                    </template>
                  </el-table-column>
                  <el-table-column align = "center" label = "比例标准" :render-header = "handelHelp"
                  label-class-name=  "字段的比例标准为int类型，仅当字段为numberic类型可输入，只能为正整数">
                    <template slot-scope = "scope">
                      <el-form-item :prop = "'tableData[' + scope.$index + '].scale'" :rules = "rules.scale"
                      :required = "scope.row.typeArray ? !scope.row.typeArray.is_allow_empty_zero_scale : ''">
                        <el-input :disabled = "scope.row.typeArray ? (!isEdit || scope.row.typeArray.is_allow_empty_zero_scale) : !isEdit"
                        v-model = "scope.row.scale" placeholder = "请输入" :title = 'scope.row.scale' clearable></el-input>
                      </el-form-item>
                    </template>
                  </el-table-column>
                  <el-table-column align = "center" label = "关联信息" :render-header = "handelHelp"
                  label-class-name = "字段的关联信息，该关联信息只适用于一对一的关联，一对多不适用，格式为：{表名}.{关联栏位名称}->{显示栏位的名称}">
                    <template slot-scope = "scope">
                      <el-form-item>
                        <el-input clearable :disabled = "!isEdit && !createdEdit" v-model = "scope.row.reference" placeholder = "请输入" :title = 'scope.row.reference' @focus = "selectRefFun(scope.row)"></el-input>
                      </el-form-item>
                    </template>
                  </el-table-column>
                  <el-table-column align = "center" label = "格式化设定">
                    <template slot-scope = "scope">
                      <el-form-item :prop = "'tableData[' + scope.$index + '].format'">
                        <el-input :disabled = "!isEdit && !createdEdit" v-model = "scope.row.format" placeholder = "请输入" :title = 'scope.row.format' clearable></el-input>
                      </el-form-item>
                    </template>
                  </el-table-column>
                  <el-table-column align = "center" label = "排序编号" width="80" :render-header = "handelHelp" label-class-name = "字段栏位的排序编号，值为整数">
                    <template slot-scope = "scope">
                      <el-form-item :prop = "'tableData[' + scope.$index + '].sort_num'" :rules = "rules.sort_num">
                        <el-input :disabled = "!isEdit && !createdEdit" v-model = "scope.row.sort_num" placeholder = "请输入"></el-input>
                      </el-form-item>
                    </template>
                  </el-table-column>
                  <el-table-column align = "center" label = "可为空" width = "70" :render-header = "handelHelp" label-class-name = "当字段为PK时，不能为空">
                    <template slot-scope = "scope">
                      <el-form-item>
                        <el-switch :disabled = "!isEdit || scope.row.is_pk" v-model = "scope.row.is_allow_empty"></el-switch>
                      </el-form-item>
                    </template>
                  </el-table-column>
                  <el-table-column align = "center" label = "设为PK" width = "70" :render-header = "handelHelp" label-class-name = "指示该字段是否为唯一键值">
                    <template slot-scope = "scope">
                      <el-form-item>
                        <el-switch :disabled = "scope.row.typeArray ? (!isEdit || !scope.row.typeArray.is_allow_pk) : !isEdit" v-model = "scope.row.is_pk" @change = "setPk(scope.row)"></el-switch>
                      </el-form-item>
                    </template>
                  </el-table-column>
                  <el-table-column align = "center" label = "唯一键" width = "70" :render-header = "handelHelp" label-class-name = "用于除重使用的唯一键">
                    <template slot-scope = "scope">
                      <el-form-item>
                        <el-switch :disabled = "!isEdit && !createdEdit" v-model = "scope.row.is_logic_unique"></el-switch>
                      </el-form-item>
                    </template>
                  </el-table-column>
                  <el-table-column align = "center" label = "备注">
                    <template slot-scope = "scope">
                      <el-form-item :prop = "'tableData[' + scope.$index + '].memo'">
                        <el-input :disabled = "!isEdit && !createdEdit" v-model = "scope.row.memo" placeholder = "请输入" :title = 'scope.row.memo'></el-input>
                      </el-form-item>
                    </template>
                  </el-table-column>
                  <el-table-column align = "center" label = "扩展参数" :render-header = "handelHelp"
                  label-class-name = "字段类型为wiki时,需要设置扩展参数">
                    <template slot-scope = "scope">
                      <el-form-item :prop = "'tableData[' + scope.$index + '].ext_parameters'" :rules = "scope.row.data_type === 'wiki' ? rules.ext_parameters : rules.ext_parameters_no">
                        <el-input clearable :disabled = "scope.row.data_type !== 'wiki' || (!isEdit && !createdEdit)" v-model = "scope.row.ext_parameters" placeholder = "请输入"
                        :title = 'scope.row.ext_parameters' @focus = "selectTemplateDoc(scope.row, scope.$index)"></el-input>
                      </el-form-item>
                    </template>
                  </el-table-column>
                  <el-table-column align = "center" label = "操作" width = "70">
                    <template slot-scope = "scope">
                      <el-button :disabled = "!isEdit" type="text" @click = "handleDelete(scope.$index)">
                        <i class = "iconfont icon-shanchu"></i>删除
                      </el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </el-tab-pane>
            <el-tab-pane label = '固定栏位' name = 'fixedColumns'>
              <div class = 'page_tableContent'>
                <el-table :data = "fixColumns" style = "width:100%"  border stripe>
                  <el-table-column v-for = "(item, index) in fixColumnsTable" align = "center" :label = "item.name" :key = 'index' show-overflow-tooltip>
                    <template slot-scope = "scope">
                      <span v-if = "item.indexName.indexOf('is_') !== -1">{{scope.row[item.indexName] ? '是' : '否'}}</span>
                      <span v-else>{{scope.row[item.indexName]}}</span>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </el-tab-pane>
            <el-tab-pane label = '虚拟栏位' name = 'virtualColumns'>
              <div class = 'page_tableContent'>
                <div class = "addColumn" v-show = "isEdit || createdEdit">
                  <p @click = "addVirColumn"> <i class="iconfont icon-add"></i>新增字段</p>
                </div>
                <el-table :data = "ruleForm.virColumns" style = "width:100%" empty-text = "暂无字段，请立即添加" border stripe>
                  <el-table-column align = "center" label = "字段名称" :render-header = "handelHelp" label-class-name = "字段名称不能为空，且必须是英文字符" show-overflow-tooltip>
                    <template slot-scope = "scope">
                      <el-form-item :prop = "'virColumns[' + scope.$index + '].column_name'" :rules = "rules.column_name">
                        <el-input :disabled = "!isEdit && !createdEdit" v-model = "scope.row.column_name" placeholder = "请输入" :title = "scope.row.column_name" clearable></el-input>
                      </el-form-item>
                    </template>
                  </el-table-column>
                  <el-table-column align = "center" label = "字段描述" :render-header = "handelHelp" label-class-name = "字段的描述内容不能超过100字符">
                    <template slot-scope = "scope">
                      <el-form-item :prop = "'virColumns[' + scope.$index + '].column_desc'" :rules = "rules.column_desc">
                        <el-input :disabled = "!isEdit && !createdEdit" v-model = "scope.row.column_desc" placeholder = "请输入" :title = "scope.row.column_desc" clearable></el-input>
                      </el-form-item>
                    </template>
                  </el-table-column>
                  <el-table-column align = "center" label = "字段类型" :render-header = "handelHelp" label-class-name = "字段类型不能为空">
                    <template slot-scope = "scope">
                      <el-form-item :prop = "'virColumns[' + scope.$index + '].data_type'" :rules = "rules.data_type">
                        <el-select :disabled = "!isEdit && !createdEdit" v-model = "scope.row.data_type" placeholder = "请选择" @change = "dataTypeChange(scope.row, 'ruleForm')"
                        filterable clearable :title = 'scope.row.data_type' style = 'width:100%'>
                          <el-option-group v-for = 'group in allDataType_category' :key = 'group.category' :label = 'group.category'>
                            <el-option v-for = 'item in group.tables' :key = "item.data_type + '(' +scope.$index + ')'" :value = 'item.data_type' :label = "item.desc ? item.data_type + '(' + item.desc + ')' : item.data_type"></el-option>
                          </el-option-group>
                        </el-select>
                      </el-form-item>
                    </template>
                  </el-table-column>
                  <el-table-column align = "center" label = "数据精度" :render-header = "handelHelp"
                  label-class-name = "仅当字段为varchar、nvarchar、numberic类型时可输入，并且不能为空，只能为正整数">
                    <template slot-scope = "scope">
                      <el-form-item :prop = "'virColumns[' + scope.$index + '].precision'" :rules = "rules.precision"
                      :required = "scope.row.typeArray ? !scope.row.typeArray.is_allow_empty_zero_precision : ''">
                        <el-input :disabled = "!isEdit && !createdEdit"
                        v-model = "scope.row.precision" placeholder = "请输入" :title = 'scope.row.precision' clearable></el-input>
                      </el-form-item>
                    </template>
                  </el-table-column>
                  <el-table-column align = "center" label = "比例标准" :render-header = "handelHelp"
                  label-class-name=  "字段的比例标准为int类型，仅当字段为numberic类型可输入，只能为正整数">
                    <template slot-scope = "scope">
                      <el-form-item :prop = "'virColumns[' + scope.$index + '].scale'" :rules = "rules.scale"
                      :required = "scope.row.typeArray ? !scope.row.typeArray.is_allow_empty_zero_scale : ''">
                        <el-input :disabled = "!isEdit && !createdEdit"
                        v-model = "scope.row.scale" placeholder = "请输入" :title = 'scope.row.scale' clearable></el-input>
                      </el-form-item>
                    </template>
                  </el-table-column>
                  <el-table-column align = "center" label = "关联信息" :render-header = "handelHelp"
                  label-class-name = "字段的关联信息，该关联信息只适用于一对一的关联，一对多不适用，格式为：{表名}.{关联栏位名称}->{显示栏位的名称}">
                    <template slot-scope = "scope">
                      <el-form-item>
                        <el-input clearable :disabled = "!isEdit && !createdEdit" v-model = "scope.row.reference" placeholder = "请输入" :title = 'scope.row.reference' @focus = "selectRefFun(scope.row)"></el-input>
                      </el-form-item>
                    </template>
                  </el-table-column>
                  <el-table-column align = "center" label = "默认值">
                    <template slot-scope = "scope">
                      <el-form-item :prop = "'virColumns[' + scope.$index + '].default_value'">
                        <el-input :disabled = "!isEdit && !createdEdit" v-model = "scope.row.default_value" placeholder = "请输入" :title = 'scope.row.default_value' clearable></el-input>
                      </el-form-item>
                    </template>
                  </el-table-column>
                  <el-table-column align = "center" label = "排序编号" width="80" :render-header = "handelHelp" label-class-name = "字段栏位的排序编号，值为整数">
                    <template slot-scope = "scope">
                      <el-form-item :prop = "'virColumns[' + scope.$index + '].sort_num'" :rules = "rules.sort_num">
                        <el-input :disabled = "!isEdit && !createdEdit" v-model = "scope.row.sort_num" placeholder = "请输入"></el-input>
                      </el-form-item>
                    </template>
                  </el-table-column>
                  <el-table-column align = "center" label = "格式化表达式">
                    <template slot-scope = "scope">
                      <el-form-item :prop = "'virColumns[' + scope.$index + '].format'">
                        <el-input :disabled = "!isEdit && !createdEdit" v-model = "scope.row.format" placeholder = "请输入" :title = 'scope.row.format'></el-input>
                      </el-form-item>
                    </template>
                  </el-table-column>
                  <el-table-column align = "center" label = "备注">
                    <template slot-scope = "scope">
                      <el-form-item :prop = "'virColumns[' + scope.$index + '].memo'">
                        <el-input :disabled = "!isEdit && !createdEdit" v-model = "scope.row.memo" placeholder = "请输入" :title = 'scope.row.memo'></el-input>
                      </el-form-item>
                    </template>
                  </el-table-column>
                  <el-table-column align = "center" label = "UI控件类型">
                    <template slot-scope = "scope">
                      <el-form-item :prop = "'virColumns[' + scope.$index + '].ui_type'">
                        <el-input :disabled = "!isEdit && !createdEdit" v-model = "scope.row.ui_type" placeholder = "请输入" :title = 'scope.row.ui_type'></el-input>
                      </el-form-item>
                    </template>
                  </el-table-column>
                  <el-table-column align = "center" label = "操作" width = "70">
                    <template slot-scope = "scope">
                      <el-button :disabled = "!isEdit && !createdEdit" type="text" @click = "handleVirDelete(scope.$index)">
                        <i class = "iconfont icon-shanchu"></i>删除
                      </el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </el-tab-pane>
          </el-tabs>
          <!-- 底部的按钮 -->
          <div class = 'page_bottomContent'>
            <div class = 'page_btnsContent'>
              <el-form-item class = "form_noLeftMargin">
                <div v-show = "isEdit || createdEdit">
                  <el-button @click = "resetForm ('ruleForm')" type = "info">取 消</el-button>
                  <el-button type = "primary" @click = "submitForm ('ruleForm', operationType)">确 定</el-button>
                </div>
                <div v-show = "(!isEdit && !createdEdit) && tableList.length">
                  <el-button type = "primary" @click = "handleDrop" v-if = "checkedId.is_created">删 表</el-button>
                  <el-button type = "primary" @click = "handleCreate">建 表</el-button>
                  <el-button type = "primary" @click = "showCopyTable">复制表</el-button>
                  <el-button type = "primary" @click = "showCopyData">复制数据</el-button>
                </div>
              </el-form-item>
            </div>
          </div>
        </el-form>
      </div>
    </div>
    <!-- 选择关联信息的弹窗 -->
    <R-Table :showDialog = "showDialog" :refInfo = "refInfo" :currentTable = "checkedId.metauid" :refRow = "clickRow.reference"
    @giveUp = "showDialog=false" @sureSelectRef = "sureSelectRef"></R-Table>
    <!-- 复制表的弹窗 -->
    <C-Table :copyTableDialog = "copyTableDialog" :currentTable = "checkedId"
    @giveUpCopyTable = "copyTableDialog=false" @sureCopyTable = "sureCopyTable"></C-Table>
    <!-- 复制表的数据的弹窗 -->
    <C-Data :copyDataDialog = "copyDataDialog" :currentTable = "checkedId" :tableList = "tableList"
    @giveUpCopyData = "copyDataDialog=false" @sureCopyData = "sureCopyData"></C-Data>
    <!-- 将指定的元数据生成脚本并下载的相关操作 -->
    <Download-Ws :wsConsoleDialog = 'wsDialogInfo.visible' :wsTitle = 'wsDialogInfo.title' :wsApiRouter = 'wsDialogInfo.wsApiRouter'
    @wsConsoleDialogClosed = 'wsDialogInfo.visible = false'></Download-Ws>
    <!-- 扩展参数设置,选择模板时 -->
    <Get-Template-Dialog :showPopDialog = 'extParameters.showDialog' :defaultTemplateId = 'extParameters.templateId'
    @closePopDialog = 'extParameters.showDialog = false' @closePopDialogSuccess = 'getTemplateIdSuccess'></Get-Template-Dialog>
  </div>
</template>

<script src='./maintainM.js'></script>
